<template>
  
    <!-- <div class="input-root">
        
    </div> -->
    <div class="InputArea">
        <!-- placeholder="请输入内容" -->
            
            <textarea
              ref="textareaRef" 
              v-model="input" 
              class="input-item"
              :rows="rows">
            </textarea>
            
          <div class="toolList">
              <el-button class="tool-list-button" @click="getContent"  type="primary">发送</el-button>
          </div>
          <div class="blankArea"></div>
      </div>
</template>
<script setup lang="js">

import {ref, watch, nextTick, onMounted} from 'vue';
import { emitter } from '@/tool/emitters';
const textareaRef = ref(null);
const rows = ref(1)
const content = ref('')
let input = ref('');

onMounted(() => {
    nextTick(adjustTextareaSize);
});

watch(() => content.value, () => {
    nextTick(adjustTextareaSize);
})

function getContent(){
    emitter.emit('sen-content',input.value) 
    input.value = '';

}

// 参考vant组件库中的field组件
const adjustTextareaSize = () => {
let textarea =textareaRef.value; 
textarea.style.height = 'auto'; 
const height = textarea.scrollHeight;


if (height) { // 改变textarea高度达到自适应
textarea.style.height = height + "px";

}
}

</script>

<style scoped>

.InputArea {
width: 60%;
height: auto;
max-height: 300px;
background-color:  rgb(243, 243, 243);
border: #007 solid 1px;
border-radius: 10px;
position: fixed;
bottom:5%;
left: 50%;
transform: translateX(-50%);

min-width: 300px;
z-index: 1000;

display: flex;
flex-direction: column; /* 新增：垂直排列 */
align-items: center; /* 新增：居中对齐 */
gap: 10px; /* 新增：子元素间距 */
overflow: hidden;
/* 响应式调整 */
@media (max-width: 992px) {
    width: 75%;
}
@media (max-width: 768px) {
    width: 90%;
    min-width: unset;
}
@media (max-width: 480px) {
    width: 100%;
    border-radius: 0;
    bottom: -5px;
}
}
.input-item {
/* 保持原有基础样式 */
width: calc(100% - 10px);
height: 120%;
position: static;
margin-bottom: 0px;
border-radius: 10px;
border-color: rgb(243, 243, 243);
background-color: rgb(243, 243, 243);
/* 修改布局属性 */
display: block; /* 改为块级元素 */
white-space: pre-wrap; /* 允许保留换行符 */
word-wrap: break-word; /* 超出宽度自动换行 */
resize:none;

overflow-y:auto; /* 添加垂直滚动条 */
padding: 5px 1px; /* 增加内边距 */
scrollbar-width: thin;
scrollbar-gutter: stable both-edges;
scrollbar-color: #007 rgb(237, 237, 237);
@media (max-width: 768px) {
/* 保持原有响应式修改 */
min-height: 60px;
width: calc(100% - 10px);
}
}
.input-item:focus {

outline: none;
border: 1px solid none; /* 保持相同边框宽度 */
}
.toolList{
width: 100%; /* 新增：撑满容器宽度 */
height: 40px;
position: relative;
display: flex;
justify-content: flex-end;
/* 新增：自动顶部外边距保持底部定位 */
padding-bottom: 5px; /* 新增：保持底部间距 */
}
.blankArea{
width: 100%;
height: 100%;
margin-top: -1px;
background-color: rgb(255, 255, 255);
}
.tool-list-button{
margin-right: 10px;
}
</style>